<template>
  <div class="property-panel">
    <div class="paper-settings">
      <h3>纸张设置</h3>
      <div class="paper-options">
        <t-select v-model="selectedPaper" @change="updatePaperSize" label="纸张尺寸:">
          <t-option v-for="paper in paperPresets" :key="paper.name" :value="paper.name" :label="`${paper.name}`" />
        </t-select>
        <t-radio-group v-model="paperOrientation" @change="updateOrientation" class="orientation-group">
          <t-radio value="landscape">横向</t-radio>
          <t-radio value="portrait">纵向</t-radio>
        </t-radio-group>
        <t-input type="number" v-model="customWidth" align="right" label="宽度:" suffix="mm"
          :readonly="selectedPaper !== '自定义尺寸'" />
        <t-input type="number" v-model="customHeight" align="right" label="高度:" suffix="mm"
          :readonly="selectedPaper !== '自定义尺寸'" />
        <t-button @click="applyCustomSize" block>应用</t-button>
      </div>
    </div>
    <h3>属性设置</h3>
    <div class="property-form">
      <div class="property-group" v-if="selectedControl && !Array.isArray(selectedControl)">
        <div class="property-item">
          <label>控件类型</label>
          <t-input v-model="selectedControl.type" readonly />
        </div>
        <div class="property-item">
          <label>控件类型</label>
          <t-input v-model="selectedControl.type" readonly />
        </div>
        <div class="property-item">
          <label>X 坐标</label>
          <t-input-number v-model="selectedControl.x" />
        </div>
        <div class="property-item">
          <label>Y 坐标</label>
          <t-input-number v-model="selectedControl.y" />
        </div>
        <div class="property-item">
          <label>宽度</label>
          <t-input-number v-model="selectedControl.width" />
        </div>
        <div class="property-item">
          <label>高度</label>
          <t-input-number v-model="selectedControl.height" />
        </div>
        <div class="property-item" v-if="selectedControl.type === 'text'">
          <label>文本内容</label>
          <t-input v-model="selectedControl.text" />
        </div>
        <div class="property-item" v-if="selectedControl.type === 'image'">
          <label>图片 URL</label>
          <t-input v-model="selectedControl.src" />
        </div>
      </div>
      <div v-else class="empty-tip">
        <t-icon name="info-circle" />
        <span v-if="!Array.isArray(selectedControl)">请选择一个控件</span>
        <span v-else>已选择多个控件</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const emit = defineEmits(['update-paper-size']);
const props = defineProps({
  selectedControl: {
    type: Object,
    default: null
  }
});
const paperOrientation = ref('landscape');

watch(() => props.selectedControl, (newVal) => {
  console.log('Selected control updated:', newVal);
}, { immediate: true });
const selectedPaper = ref('增值税发票');
const customWidth = ref(240);
const customHeight = ref(110);

const paperPresets = ref([
  { name: '超市小票', width: 80, height: 50 },
  { name: '增值税发票', width: 240, height: 110 },
  { name: 'A5纸张', width: 210, height: 148 },
  { name: '自定义尺寸', width: 240, height: 140 },
]);

const updatePaperSize = () => {
  const paper = paperPresets.value.find(p => p.name === selectedPaper.value);
  if (paper && paper.name !== '自定义') {
    customWidth.value = paper.width;
    customHeight.value = paper.height;
    // 触发与编辑区域的联动逻辑
    emit('update-paper-size', { width: paper.width, height: paper.height, isLandscape: paperOrientation.value === 'landscape' });
  }
};

const applyCustomSize = () => {
  // 触发与编辑区域的联动逻辑
  emit('update-paper-size', {
    width: customWidth.value,
    height: customHeight.value,
    isLandscape: paperOrientation.value === 'landscape'
  });
};

const updateOrientation = () => {
  // 触发与编辑区域的联动逻辑
  emit('update-paper-size', {
    width: customWidth.value,
    height: customHeight.value,
    isLandscape: paperOrientation.value === 'landscape'
  });
};
</script>

<style scoped>
.property-panel {
  width: 250px;
  padding: 10px;
  background-color: #f5f5f5;
  border-left: 1px solid #ddd;
}

.paper-settings {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ddd;
}

.paper-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.orientation-group {
  margin-top: 5px;
}

.full-width {
  width: 100%;
  margin-bottom: 10px;
}

.custom-size {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.size-inputs {
  display: flex;
  gap: 5px;
}

.size-inputs .t-input-number {
  flex: 1;
}

.property-form {
  margin-top: 10px;
}

.property-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.property-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.empty-tip {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #999;
}
</style>